@import "~styles/config.scss";

.userBox {
    display: flex;

    .icon {
        flex         : none;
        // object-fit: cover;
        width        : 60px;
        height       : 60px;
        display      : block;
        border-radius: 2px;
        overflow     : hidden;

        img {
            width : 100%;
            height: 100%;
        }
    }

    .text {
        flex: auto;
        padding-left:14px;
        .name {

            display           : -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow          : hidden;
            height            : 30px;
            font-size: 16px;
            line-height       : 30px;
            color             : $--color-text-primary;
            font-weight       : bold;
        }
        .id{
            line-height       : 30px;
        }
    }
}
.payAmount{
    font-weight: bold;
}

.userShow {

    display: flex;
    cursor: pointer;
    .icon {
        width        : 40px;
        height       : 40px;
        display      : block;
        border-radius: 6px;
        overflow     : hidden;
        border       : 3px solid #fff;
    }
    .more {
        margin-left:-14px;
        font-size: 12px;
        transform: rotate(90deg);
    }
}

.goodsBox {
    width     : 100%;
    display   : flex;
    flex-wrap : wrap;
    box-sizing: border-box;
    border    : 1px solid $--border-color-extra-light;
    overflow  : hidden;
    overflow-y: auto;
    max-height: 50vh;

    .item {
        border-top: 1px solid $--border-color-extra-light;
        padding   : 10px 10px 10px 10px;
        overflow  : hidden;
        box-sizing: border-box;
        display   : flex;

        &:first-of-type {
            border-width: 0px;
        }

        .albumUrl {
            flex         : none;
            // object-fit: cover;
            width        : 50px;
            height       : 50px;
            display      : block;
            border-radius: 2px;
            overflow     : hidden;

            img {
                width : 100%;
                height: 100%;
            }
        }

        .text {
            padding        : 0px 10px;
            flex           : auto;
            display        : flex;
            flex-direction : column;
            justify-content: space-between;
            line-height    : 17px;

            .name {

                display           : -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow          : hidden;
                height            : 20px;
                line-height       : 20px;
                color             : $--color-text-primary;
                font-weight       : bold;
            }

            .des {
                margin            : 5px 0px 3px 0px;
                display           : -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow          : hidden;
                line-height       : 20px;
                font-size         : 12px;
                color             : $--color-text-secondary;
            }

            .num {
                color      : $--color-text-secondary;
                margin-left: -10px;
                line-height: 20px;
                display    : flex;
                font-size  : 12px;

                .n {
                    margin-left: 10px;
                }
            }
        }


    }
}

.goodsShow {
    display     : flex;
    padding-left: 10px;
    align-items : center;
    width       : 100%;
    cursor      : pointer;
    justify-content: flex-end;

    .item {
        margin-left: -10px;

        .albumUrl {
            width        : 40px;
            height       : 40px;
            overflow     : hidden;
            position     : relative;
            z-index      : 1;
            border-radius: 100%;
            border       : 3px solid #fff;
        }
    }

    .more {
        font-size: 12px;
        transform: rotate(90deg);
    }
}
